<template>
  <div class="app">
    <div class="layout">
      <div class="flex flex-col h-full">
        <!-- 头部导航栏区域 -->
        <header class="header">
          <div class="flex justify-between items-center w-full">
            <div class="flex items-center gap-4">
              <div v-if="showfor != '606'">
                <img src="@/assets/logo.png" style="height: 30px" alt="图片加载失败"/>
              </div>
              <div class="logo">
                {{title}}
              </div>
            </div>
            <!-- 添加设置按钮 -->
            <div>
              <button @click="showFontSettings = true" class="btn btn-sm btn-ghost">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span class="ml-1">设置</span>
              </button>
            </div>
          </div>
        </header>
        <router-view @update:darkMode="handleDarkModeUpdate"/>
      </div>
    </div>

    <!-- 字体设置弹窗 -->
    <div v-if="showFontSettings" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
      <FontSettingsPanel @close="showFontSettings = false"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import FontSettingsPanel from '@/components/FontSettingsPanel.vue';
import {useRoute} from "vue-router";

const route = useRoute()

// 声明全局window.parameter类型
declare global {
  interface Window {
    parameter: {
      SHOW_FOR: string;
    };
  }
}

const showfor = window.parameter?.SHOW_FOR || '';
// 深色模式状态
const isDarkMode = ref(true);
// 控制字体设置面板显示
const showFontSettings = ref(false);
// 初始化黑色主题
document.documentElement.setAttribute("dark-mode", isDarkMode.value);
localStorage.setItem('dark-mode', isDarkMode.value);

// // 深色模式状态
// const isDarkMode = ref(true);
//
// // 处理深色模式更新
// const handleDarkModeUpdate = (darkMode: boolean) => {
//   isDarkMode.value = darkMode;
// };

// 标题
const title = ref("数据回放")

if (route.query.title){
  title.value = route.query.title as string;
}
</script>

<style>
@import '../src/assets/css/theme.css';
@import '../src/assets/css/buttons.css';
@import '../src/assets/css/modal.css';
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f4f8;
  color: var(--text-color);
  position: relative;
  overflow: hidden;
}

/* 科技网格背景 */
.app::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 80% 10%, rgba(30, 58, 138, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 20% 60%, rgba(30, 144, 255, 0.05) 0%, transparent 50%),
    linear-gradient(0deg, rgba(30, 64, 175, 0.02) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(30, 64, 175, 0.02) 1px, transparent 1px) 0 0 / 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* 光束效果 */
.app::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, transparent 80%, rgba(99, 102, 241, 0.02) 100%);
  animation: rotate 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 深色模式样式 */

.dark-mode .app {
  background: #0a0a0acb;
  color: #e0e0e0;
}
/* 深色模式下的科技网格背景 */
.dark-mode .app::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 80% 10%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 20% 60%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    linear-gradient(0deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px) 0 0 / 20px 20px;
}

/* 深色模式下的光束效果 */
.dark-mode .app::after {
  background: radial-gradient(circle at 50% 50%, transparent 80%, rgba(56, 189, 248, 0.05) 100%);
}

.layout {
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.header {
  background: var(--title-bg-color) !important;
  backdrop-filter: blur(10px);
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid rgba(30, 64, 175, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
}

/* 科技感边框发光效果 */
.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  //background: linear-gradient(90deg,
  //  transparent 0%,
  //  rgba(56, 189, 248, 0.5) 20%,
  //  rgba(30, 64, 175, 0.8) 50%,
  //  rgba(56, 189, 248, 0.5) 80%,
  //  transparent 100%);
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.logo {
  font-size: 20px;
  font-weight: bold;
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  //text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  position: relative;
}

/* 数字雨效果 */
.logo::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  background-size: 200% 100%;
  animation: shine 5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

@keyframes shine {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

.btn-file .icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

.btn-file span {
  white-space: nowrap;
}

.tech-btn span {
  white-space: nowrap;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--webkit-track-color);
    border-radius: 4px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: var(--webkit-thumb-color);
    border-radius: 4px;
}
/* 滚动条滑块 hover 状态 */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--webkit-thumb-hover-color);
}
/* 全局按钮样式覆盖 */
button {
  outline: none !important;
}

button::-moz-focus-inner {
  border: 0;
}

button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.btn, .btn-sm, .btn-ghost{
  position: relative;
  outline: none !important;
}

.btn:focus, .btn-sm:focus, .btn-ghost:focus{
  outline: none !important;
  /*box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25) !important;*/
}
.btn-ghost:hover{
    background-color: var(--btn-hover-color);
}
</style>
